import React, { Component } from 'react'
// 使用css -in - js 技术
// 第一步: 下载该技术最常用的一种实现方案 styled-components
// npm i styled-components

// 第二步: 在当前页面组件中, 引入 styled-components
import styled from 'styled-components';
// console.log('styled', styled) //函数形式

// 定义样式
// 注意: 如果在组件中使用css-in-js,那么默认是没有css 提示的, 因为需要给编辑器额外安装一个cssinjs 的
// 语法提示插件  vscode-styled-components这样就会有类似css 中的样式提示了
// Mytitle 变量名为一个标签名, 使用时用该组件名去包裹需要添加的样式标签或组件
// 实现样式的原理: 以内部样式表的形式在header头添加样式, 并且会随机一个类型,保证样式不冲突


// 语法: 样式的继承



// 语法: 样式的属性传递

import { Mytitle, Mycss, Mycss1, Mycss2 } from './styled'
export default class Father extends Component {
    state = {
        greenColor: 'green'
    }
    render() {
        return (
            <div>
                <Mytitle><div>Father</div></Mytitle>
                <div>
                    <Mycss>
                        测试样式
                    </Mycss>
                </div>
                <div>
                    <Mycss1>
                        测试样式2
                    </Mycss1>
                </div>
                <div>
                    <Mycss2 background1={this.state.greenColor}>
                        测试样式3
                    </Mycss2>
                </div>
            </div>
        )
    }
}

// const Mytitle = styled.div`
//   /* 以前css 怎么写样式, 该处就怎么写样式 */
//   font-size: 30px;
//   color:red
// `
// const Mytitle1 = styled.div`
//   /* 以前css 怎么写样式, 该处就怎么写样式 */
//   font-size: 30px;
//   color:red
// `